<!--
 * @Description  : 
 * @Author       : jiangxiaoying
 * @Date         : 2021-02-01 10:32:47
 * @LastEditTime : 2021-02-01 19:47:40
 * @LastEditors  : jiangxiaoying
 * @FilePath     : \cloud-components\docs\pages\components\cloud-select\example1.vue
-->
<template>
  <div>
    <CloudSelect
      :options="options"
      v-model="value"
      :filterOption="false"
    ></CloudSelect>
    <div style="margin-top: 20px">
    可搜索：
    <CloudSelect
     v-model="value1"
      :options="options"
      show-search
      placeholder="Select a person"
      option-filter-prop="children"
      :filter-option="filterOption"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="handleChange"
    >
    </CloudSelect>
    </div>
  </div>
</template>

<script>
export default {
  title: '1.基础用法',
  data() {
    return {
      options: [{
        text: 123,
        value: '1'
      }, {
        text: 456,
        value: '2'
      }, {
        text: 789,
        value: '3'
      }, {
        text: 111,
        value: '4'
      }, {
        text: 222,
        value: '5'
      }, {
        text: 333,
        value: '6'
      }],
      value: undefined,
      value1: ''
    }
  },
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
}
</script>

<style lang="scss">
</style>